<template>
    <div class="head-container">
        <el-input v-model="deptName" placeholder="请输入部门名称" clearable :prefix-icon="Search" style="margin-bottom: 20px" />
    </div>

    <div class="head-container">
        <el-tree :data="data" :props="{ label: 'deptName', children: 'children' }" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="deptTreeRef" highlight-current :default-expand-all="false"
            @node-click="handleNodeClick" />
    </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import useDeptStore from '../../store/dept'
import useApp from '@/hooks'
const deptStore = useDeptStore()
const { proxy } = useApp();
const deptName = ref('')
const data = ref([])
const emit = defineEmits(['confirm'])
const props = defineProps({
    value: {
        type: [String, Number]
    }
})
/** 节点单击事件 */
function handleNodeClick(data) {
    emit('confirm', data.id)
    // queryParams.value.deptId = data.id;
    // handleQuery();
}
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
    if (!value) return true;
    //return data.label.indexOf(value) !== -1;
    return data.deptName.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, (val) => {
    proxy.$refs["deptTreeRef"].filter(val);
});
deptStore.getTree().then(res => {
    data.value = res
})
</script>
<style></style>